<template>
	<div id="appRoot">
		<sidebar>
			<card label="机构管理">
				<el-button slot="header" type="primary" size="small" @click="openDialogAddData()">添加机构</el-button>
				<div class="from-query">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="搜索">
							<el-input v-model="queryData.name" size="small" placeholder="员工姓名/帐号"></el-input>
						</el-form-item>
						<el-form-item label="机构类型">
							<el-select v-model="queryData.merType" size="small" placeholder="请选择活动区域">
								<el-option label="全部" :value="-1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="所在地区" class="area-select">
							<el-select v-model="queryData.proviceId" size="small" placeholder="省" @change="changeProvince">
								<el-option label="全部" :value="-1"></el-option>
								<el-option v-for="item in provinceList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
							</el-select>
							<el-select v-model="queryData.cityId" size="small" placeholder="市" @change="changeCity">
								<el-option label="全部" :value="-1"></el-option>
								<el-option v-for="item in cityList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
							</el-select>
							<el-select v-model="queryData.townId" size="small" placeholder="区">
								<el-option label="全部" :value="-1"></el-option>
								<el-option v-for="item in townList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="getTableData(1)">查询</el-button>
						</el-form-item>
					</el-form>
				</div>
			</card>
			<div class="table-container" v-loading.body="loading">
				<template v-if="tableDataError">
					<table-data-fail type="error"></table-data-fail>
				</template>
				<template v-else-if="tableData.length > 0">
					<el-table
							:data="tableData"
							stripe
							border
							style="width: 100%">
						<el-table-column
								prop="merName"
								align="center"
								header-align="left"
								label="机构名称">
						</el-table-column>
						<!--<el-table-column-->
								<!--prop="merNo"-->
								<!--align="center"-->
								<!--header-align="left"-->
								<!--label="机构类型">-->
						<!--</el-table-column>-->
						<el-table-column
								prop="address"
								align="center"
								header-align="left"
								label="地址">
						</el-table-column>
						<el-table-column
								prop="person"
								align="center"
								header-align="left"
								label="管理员姓名">
						</el-table-column>
						<el-table-column
								prop="account"
								align="center"
								header-align="left"
								label="管理员帐号">
						</el-table-column>
						<el-table-column
								prop="phone"
								align="center"
								header-align="left"
								label="管理员手机号">
						</el-table-column>
						<el-table-column
								prop="state"
								align="center"
								header-align="left"
								label="机构状态">
						</el-table-column>
						<el-table-column
								align="center"
								header-align="left"
								label="操作">
							<template scope="scope">
								<el-button type="text" size="small" @click="openDialogAddData(scope.row)">编辑</el-button>
								<el-button v-if="scope.row.state === '启用'" type="text" size="small" @click="toggleState(scope.row.merId, '0')">关闭</el-button>
								<el-button v-else type="text" size="small" @click="toggleState(scope.row.merId, '1')">启用</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-wrapper">
						<el-pagination
								@current-change="getTableData"
								:current-page.sync="paginationData.currentPage"
								:page-size="paginationData.pageSize"
								layout="prev, pager, next, jumper"
								:total="paginationData.total">
						</el-pagination>
					</div>
				</template>
				<template v-else>
					<table-data-fail type="empty"></table-data-fail>
				</template>
			</div>
		</sidebar>
		<el-dialog :title="dialogEditTitle" :visible.sync="dialogAddDataVisible" class="dialog-form">
			<el-form :model="dialogAddData" label-width="120px">
				<el-form-item label="机构名称：" >
					<el-input v-model="dialogAddData.merName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="地址:">
					<areaSelect v-model="dialogAddData" ref="areaSelect"></areaSelect>
				</el-form-item>
				<el-form-item label="" >
					<el-input v-model="dialogAddData.address" auto-complete="off" placeholder="详细地址"></el-input>
				</el-form-item>
				<el-form-item label="管理员帐号：" >
					<el-input v-model="dialogAddData.account" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item v-if="dialogEditType === 'add'" label="密码：" >
					<el-input v-model="dialogAddData.password" auto-complete="off"></el-input>
				</el-form-item>
				<!--<el-form-item label="再次输入密码：" >-->
					<!--<el-input v-model="dialogAddData.name" auto-complete="off"></el-input>-->
				<!--</el-form-item>-->
				<el-form-item label="管理员姓名：" >
					<el-input v-model="dialogAddData.person" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="管理员手机号：" >
					<el-input v-model="dialogAddData.phone" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitDialogAddData">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import sidebar from 'components/layout/sidebar.vue'
	import card from 'components/layout/card.vue'
	import tableDataFail from 'components/layout/tableDataFail.vue'
	import areaSelect from 'components/areaSelect.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
	export default{
		data(){
			return{
                provinceList: [],
                cityList: [],
                townList: [],
				loading: false,
				queryData: {
                    cityId: -1,
                    merType: -1,
                    name: '',
                    proviceId: -1,
                    townId: -1
				},
				paginationData:{
					currentPage: 1,
					pageSize: 10,
					total: 0
				},
				tableDataError: false,
				tableData: [],
				dialogEditTitle: '添加机构',
				dialogEditType: 'add',
                dialogAddDataVisible: false,
				dialogAddData:{
                    merName: '',
                    proviceId: '',
                    cityId: '',
                    townId: '',
                    address: '',
                    account: '',
                    password: '',
                    person: '',
                    phone: '',
				},
				dialogOperationRecord:{
					visible: false,
				}
			}
		},
        mounted(){
            this.getTableData();
            this.getProvinceList();
        },
		methods: {
            openDialogAddData(data){
                if(data){
                    this.dialogEditTitle = '编辑机构';
                    this.dialogEditType = 'edit';
                    this.dialogAddData = {
                        merName: data.merName,
                        proviceId: data.proviceId,
                        cityId: data.cityId,
                        townId: data.townId,
                        address: data.address,
                        account: data.account,
                        person: data.person,
                        phone: data.phone,
                        merType: data.merType,
                        merId: data.merId
                    };
				}else{
                    this.dialogEditTitle = '添加机构';
                    this.dialogEditType = 'add';
                    this.dialogAddData = {
                        merName: '',
                        proviceId: '',
                        cityId: '',
                        townId: '',
                        address: '',
                        account: '',
                        password: '',
                        person: '',
                        phone: '',
                    }
				}
				if(this.$refs.areaSelect){
                    this.$refs.areaSelect.update(this.dialogAddData);
				}
                this.dialogAddDataVisible = true;
			},
            closeDialogAddData(){
                this.dialogAddDataVisible = false;
			},
            submitDialogAddData(){
                let action = this.dialogEditType === 'add' ? 'addMerInfo' : 'modMerInfo';
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.mechanism,
                    action: action,
                    data: this.dialogAddData
                }).then(function (data) {
                    this.closeDialogAddData();
                    this.getTableData();
                }.bind(this)).catch(function (err) {

                })
			},
			getTableData(current){
                let data = {
                    pageNum: current || this.paginationData.currentPage,
                    pageRow: this.paginationData.pageSize
                };
                data = Object.assign(data, this.queryData);
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.mechanism,
                    action: 'qryMerInfo',
                    data: data
                }).then(function (data) {
                    this.tableData = data.data.items || [];
                    this.paginationData.total = data.data.totalNum || 0;
                }.bind(this)).catch(function (err) {

                })
			},
			changeProvince(){
                this.queryData.cityId = -1;
//                this.queryData.townId = '';
                this.cityList = [];
//                this.townList = [];
                this.getCityList();
			},
            changeCity(){
                this.queryData.townId = -1;
                this.townList = [];
                this.getTownList();
            },
			getProvinceList(){
			    this.getAreaData(1, -1).then(data => {
			        this.provinceList = data.data.items;
				})
			},
            getCityList(){
                if(!this.queryData.proviceId){return;}
                this.getAreaData(2, this.queryData.proviceId).then(data => {
                    this.cityList = data.data.items;
                })
            },
            getTownList(){
                if(!this.queryData.cityId){return;}
                this.getAreaData(3, this.queryData.cityId).then(data => {
                    this.townList = data.data.items;
                })
            },
			getAreaData(type, id){
                return ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.reports,
                    action: 'qryReportOrg',
                    data: {
                        orgType: type,
                        parentOrgId: id
					}
                })
			},
            toggleState(id, state){
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.mechanism,
                    action: 'delMerInfo',
                    data: {
                        merId: id,
                        state: state
					}
                }).then(function (data) {
                    this.getTableData();
                }.bind(this)).catch(function (err) {

                })
			}
		},
		components:{
			sidebar,
			card,
			tableDataFail,
            areaSelect
		}
	}
</script>

<style lang="scss">
	.area-select{
		.el-select{
			display: inline-block;
			width: 80px;
		}
	}
</style>